<!--
 * @Description: 饼图-个性化标签
 * @Author: xjc
 * @Date: 2022-06-21 11:50:00
 * @LastEditTime: 2022-06-21 14:31:58
 * @LastEditors: xjc
-->
<template>
  <div id="custom-label-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Pie, G2} = G2Plot
const G = G2.getEngine('canvas')

onMounted(() => renderCustomLabel())

function renderCustomLabel() {
  const data = [
    {type: '衣服', value: 100},
    {type: '食品', value: 200},
    {type: '交通', value: 300},
    {type: '购物', value: 100},
    {type: '娱乐', value: 100},
    {type: '其他', value: 200},
  ]
  const cfg = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.75,
    legend: false,
    label: {
      type: 'spider',
      labelHeight: 40,
      formatter: (data, mappingData) => {
        const group = new G.Group({});
        group.addShape({
          type: 'circle',
          attrs: {
            x: 0,
            y: 0,
            width: 40,
            height: 50,
            r: 5,
            fill: mappingData.color
          },
        })
        group.addShape({
          type: 'text',
          attrs: {
            x: 10,
            y: 8,
            text: `${data.type}`,
            fill: mappingData.color,
          },
        });
        group.addShape({
          type: 'text',
          attrs: {
            x: 0,
            y: 25,
            text: `${data.value}个 ${data.percent * 100}%`,
            fill: 'rgba(0, 0, 0, 0.65)',
            fontWeight: 700,
          }
        })
        return group
      }
    },
    interactions: [{type: 'element-selected' }, { type: 'element-active'}]
  }
  const piePlot = new Pie('custom-label-container', cfg)
  piePlot.update({ 
    "theme": { 
      "styleSheet": { 
        "brandColor": "#FF6B3B", 
        "paletteQualitative10": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA"], 
        "paletteQualitative20": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA", "#2BCB95", "#B1ABF4", "#1D42C2", "#1D9ED1", "#D64BC0", "#255634", "#8C8C47", "#8CDAE5", "#8E283B", "#791DC9"] 
      } 
    } 
  })
  piePlot.render()
}
</script>
